<template>
  <div>
    <van-grid clickable :column-num="2">
      <van-grid-item v-if="normalUser">
        <div v-if="partnerType==0" class="box" @click="$router.push('/user/becomePartner')">
          <img src="./images/normal.png" alt />
          <p class="title" span="12">
            <span class="bold">申请成为团长</span>
            <span>邀请有礼</span>
          </p>
        </div>
        <div v-else-if="partnerType!=0" class="box" >
          <img src="./images/normal.png" alt />
          <p class="title" span="12">
            <span class="bold">我的伙伴</span>
            <span>团队精英们</span>
          </p>
        </div>
      </van-grid-item>
      <van-grid-item v-else-if="!normalUser">
        <div class="box" @click="$router.push('/user/teamCode')">
          <img src="./images/qrcode.png" alt />
          <p class="title" span="12">
            <span class="bold">二维码</span>
            <span>邀请好友加入</span>
          </p>
        </div>
      </van-grid-item>
      <van-grid-item v-if="!normalUser">
        <div class="box">
          <img src="./images/cash.png" alt />
          <p class="title flex-column" span="12">
            <span class="bold">我的团队</span>
            <span>团队精英们</span>
          </p>
        </div>
      </van-grid-item>
      <van-grid-item v-if="normalUser">
        <div class="box">
          <img src="./images/cash.png" alt />
          <p class="title flex-column" span="12">
            <span class="bold">分享有奖</span>
            <span>享现金分红</span>
          </p>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import normalPic from './images/normal.png';
import qrcodePic from './images/qrcode.png';
import cashPic from './images/cash.png';
import { Row, Col, Grid, GridItem } from 'vant';
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  props: {
    focusData: {
      type: Object,
      default: () => {}
    },
    normalUser: {
      type: Boolean,
      default: true
    },
    partnerType: {
      type: Number,
      default: 0
    }
  }
};
</script>
<style lang="scss" scoped>
.van-grid-item {
  background: #fff;
  box-sizing: border-box;
}
.box {
  display: flex;
  align-items: center;
  img {
    width: 16vw;
  }
  .title {
    padding-left: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #aaaaaa;
  }
  .bold {
    font-size: 14.7px;
    font-weight: bold;
    color: #3a3a3a;
  }
}
</style>